<template>
	<view class="mineContainer">
		<view class="headerBox flex">
			<image v-if="userInfo.headPortrait && userInfo.headPortrait!='undefined'" :src="userInfo.headPortrait"
				class="userHeadPic" @click="jumpMineInfo()"></image>
			<image v-else src="../../static/images/userHeadPic.png" class="userHeadPic" @click="jumpMineInfo()"></image>
			<view class="userInfoBox">
				<view class="userName txtOverFlow" @click="jumpMineInfo()">{{userInfo.userName}}</view>
				<view class="userState" v-if="userInfo.userState == 1">正常使用</view>
				<view class="userState" v-else>已加入黑名单</view>
			</view>
			<image src="../../static/images/setIcon.png" class="setIcon" @click="jumpMineInfo()"></image>
		</view>
		<view class="mineInfoBox">
			<block v-if="hasAppointmentInfo">
				<view class="mineHeaderBox flex">
					<view class="mineHeaderLeft flex">
						<view class="leftLine"></view>
						<view class="mineHeaderTit">整间预约</view>
					</view>
					<view class="mineHeaderRight flex" @click="goMoreAppointment()">
						<view>查看更多</view>
						<image src="../../static/images/moreIconHui.png" class="moreIconHui"></image>
					</view>
				</view>
				<view class="yuyueListBox" :style="{'padding-bottom': appointmentInfo.roomLocation ?'10rpx':'50rpx'}"
					@click="goAppointmentInfo()">
					<view class="yuyueHeaderBox flex">
						<image src="../../static/images/classRoomIcon.png" class="classRoomIcon"></image>
						<view class="yuyueTit txtOverFlow">{{appointmentInfo.laboratoryName}}</view>
						<view class="yuyueTime" v-if="appointmentInfo.orderState==0">待审核</view>
						<view class="yuyueTime" v-if="appointmentInfo.orderState==10">审核通过</view>
						<view class="yuyueTime"
							v-if="appointmentInfo.orderState==20 && appointmentInfo.isSigned==0 && appointmentInfo.isOut==0">
							待签到</view>
						<view class="yuyueTime"
							v-if="appointmentInfo.orderState==20 && appointmentInfo.isSigned==1 && appointmentInfo.isOut==0">
							进行中</view>
						<view class="yuyueTime"
							v-if="appointmentInfo.orderState==20 && appointmentInfo.isSigned==1 && appointmentInfo.isOut==1">
							已签退</view>
						<view class="yuyueTime" v-if="appointmentInfo.orderState==30">已完成</view>
						<view class="yuyueTime">{{appointmentInfo.appointmentDate}}</view>
					</view>
					<view class="yuyueTimeListBox" v-show="appointmentInfo.isShare != 1">
						<block v-for="item,index in appointmentInfo.orderDetailList" :key="index">
							<view class="yuyueTimeItem">{{item.startTime}}-{{item.endTime}}</view>
						</block>
					</view>
					<view class="locationBox flex" v-if="appointmentInfo.roomLocation">
						<image src="../../static/images/locationIcon.png" class="locationIcon"></image>
						<view class="txtOverFlow">{{appointmentInfo.roomLocation}}</view>
					</view>
				</view>

				<view class="serviceBox" style="display: flex;height:84px;">
					<view class="appointmentInfoBtn"
						v-if="appointmentInfo.orderState == 10 || appointmentInfo.orderState==0 "
						@click="cancleOrder()">取消预约</view>
					<view class="appointmentInfoBtn" v-if="appointmentInfo.orderState == 10 "
						@click="goAppointmentInfo()">邀请团队</view>
					<view class="appointmentInfoBtn"
						v-if="appointmentInfo.orderState == 20 && appointmentInfo.isSigned == 1 && appointmentInfo.isOut == 0 && appointmentInfo.userId== userInfo.userId "
						@click="showPop()">签退</view>
					<view class="appointmentInfoBtn"
						v-if="(appointmentInfo.orderState == 10|| appointmentInfo.orderState == 20)&& appointmentInfo.isOut == 0"
						@click="scanOpenDoor()">扫码开门</view>
				</view>

			</block>
			<view class="mineHeaderBox flex">
				<view class="leftLine"></view>
				<view class="mineHeaderTit">更多服务</view>
			</view>
			<view class="serviceContentBox">
				<!-- <view class="serviceItem" @click="jumpPage(1)">
					<image src="../../static/images/questionIcon.png" class="serviceIcon"></image>
					<view class="serviceTxt">常见问题</view>
				</view> -->
				<view class="serviceeContentItem" @click="goArticleInfo('000001','预约流程')">
					<image src="../../static/images/lc.png" class="serviceIcon"></image>
					<view class="serviceTxt">预约流程</view>
				</view>
				<view class="serviceeContentItem" @click="goArticleInfo('000002','使用规定')">
					<image src="../../static/images/gd.png" class="serviceIcon"></image>
					<view class="serviceTxt">使用规定</view>
				</view>
				<view class="serviceeContentItem" @click="goArticleInfo('000003','设备使用方法')">
					<image src="../../static/images/questionIcon.png" class="serviceIcon"></image>
					<view class="serviceTxt">设备使用方法</view>
				</view>


				<view class="serviceeContentItem" @click="jumpPage(2)">
					<image src="../../static/images/onlineBaoxiuIcon.png" class="serviceIcon"></image>
					<view class="serviceTxt">在线报修</view>
				</view>
				<view class="serviceeContentItem" @click="classroomLimit()">
					<image src="../../static/images/keyuyuefanwei.png" class="serviceIcon"></image>
					<view class="serviceTxt">可预约实验室范围</view>
				</view>
				<view class="serviceeContentItem" @click="showClassroomPop()">
					<image src="../../static/images/yuyuefangweizengjia.png" class="serviceIcon"></image>
					<view class="serviceTxt">实验室预约范围增加</view>
				</view>

				<!-- <view class="serviceItem" @click="jumpPage(3)">
					<image src="../../static/images/mineBaoxiuIcon.png" class="serviceIcon"></image>
					<view class="serviceTxt">我的报修</view>
				</view> -->
				<!-- <view class="serviceItem" @click="jumpPage(4)">
					<image src="../../static/images/wenjuanIcon.png" class="serviceIcon"></image>
					<view class="serviceTxt">调研问卷</view>
				</view> -->
			</view>

		</view>

		<!-- <view class="mineInfoBottom">
			<view class="mineInfoBottom-item">技术支持：南京国实信息科技有限公司</view>
			<view class="mineInfoBottom-item">400-806-1665</view>
		</view> -->

		<uni-popup ref="popup" :mask-click="false">
			<view class="popBox">

				<checkbox-group @change="changeSignOutMsg" style="overflow: hidden;">
					<!--整间预约的备注-->
					<label class="uni-list-cell uni-list-cell-pd flex radioLabel"
						v-for="(itemRemark,idxRemark) in appointmentInfo.signOutMsgList" :key="idxRemark">
						<view>
							<checkbox :value="itemRemark.msgId" color='#19AD78' />
						</view>
						<view>{{itemRemark.msgContent}}</view>
					</label>

				</checkbox-group>


				<view class="flex">
					<button @click="closePop()" class="popBtn">关闭</button>
					<button @click="surePop()" class="popBtn">确认签退</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="classroompopup" :mask-click="false">
			<view class="classroomPopBox">
				<view style="color: #19AD78;margin: 0rpx 45rpx 45rpx 45rpx;text-align: center;">申请增加实验室</view>
				<view class="selectSchoolBox flex inputBox2" style="margin-top: 15px;">
					<picker mode="selector" :range="roomList" @change="changeRoomSelect" style="width: 100%;position: relative;">
						<view class="inputBox">{{roomList[roomIdx]}}</view>
						<image src="../../static/images/moreIcon3.png" @click="changeRoomSelect" class="moreIcon3"></image>
					</picker>
				</view>
				<view class="flex">
					<button @click="closeClassroomPop()" class="popBtn">取消</button>
					<button @click="sureClassroomPop()" class="popBtn">提交</button>
				</view> 
			</view>
		</uni-popup>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatarUrl: '',
					nickName: ''
				},
				userPhone: '',
				appointmentInfo: {}, //预约信息，只展示第一条
				hasAppointmentInfo: false,
				signOutMsgIds: [],
				roomDataList: [],
				roomList: ['请选择实验室'],
				roomIdx: 0,
			}
		},
		onShow() {
			this.searchUserInfo();
			this.searchAppointmentInfo();
		},
		onPullDownRefresh() {
			this.searchUserInfo();
			this.searchAppointmentInfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//选择下拉框
			changeRoomSelect(e) {
				console.log(e)
				this.roomIdx = e.target.value;
			},
			searchUserInfo() {
				let _this = this;
				this.$utils.requestFun('/member/memberSchoolUsers/api/selectMemberUserInfoByToken?route=member', {
					token: getApp().globalData.token
				}, 'GET').then(res => {
					_this.userInfo = res.data.data;
					if (res.data.data.userName && (res.data.data.userName == res.data.data.mobilePhone)) {
						uni.getStorage({
							key: 'userInfo',
							success: function(res) {
								_this.userInfo.userName = res.data.nickName;
							}
						});
					}
				})
			},
			getH5WaitApplyClassroomList() {
				let _this = this;
				this.$utils.requestFun('/stadium/memberClassroomRel/api/getH5WaitApplyClassroomList', {
					token: getApp().globalData.token
				}, 'GET').then(res => {
					let dataList = [];
					_this.roomList= ['请选择实验室']
					_this.roomDataList= []
					if (res.data.data && res.data.data.length > 0) {
						for (let i = 0; i < res.data.data.length; i++) {
							dataList.push(res.data.data[i].laboratoryName);
						}
						_this.roomDataList = res.data.data;
						_this.roomList = _this.roomList.concat(dataList);
					}
				})
			},
			classroomLimit(){
				// #ifdef H5
					uni.reLaunch({
						url: '/pages/classroomLimt/classroomLimt'
					});
				
				// #endif	
			},
			showClassroomPop() {
				this.roomIdx = 0
				this.$refs.classroompopup.open();
				this.getH5WaitApplyClassroomList()
			},
			closeClassroomPop() {
				this.$refs.classroompopup.close();
			},
			sureClassroomPop() {
				if (this.roomIdx == 0) {
					uni.showToast({
						title: "请选择实验室！",
						icon: 'none'
					})
					return false;
				}
				let _this = this;
				_this.$utils.requestFun('/stadium/memberClassroomRel/api/h5ApplyClassroom', {
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					classroomId: _this.roomDataList[_this.roomIdx-1].laboratoryId
				}, 'GET').then(res => {
					console.log(res);
					uni.showToast({
						title: '申请成功，请等待审核！',
						success() {
							_this.$refs.classroompopup.close();
						}
					})
				});
				
				
			},
			showPop() {
				this.$refs.popup.open();
			},
			closePop() {
				this.$refs.popup.close();
			},

			surePop() {
				if (this.signOutMsgIds.length != this.appointmentInfo.signOutMsgList.length) {
					uni.showToast({
						title: '请确认完成提示！',
						icon: 'none'
					})
					return;
				}
				this.signOut();
				this.$refs.popup.close();
			},
			//签退
			signOut() {


				let _this = this;



				_this.$utils.requestFun('/stadium/laboratoryOrder/api/memberDoSignOut?route=curriculum', {
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					orderId: _this.appointmentInfo.orderId
				}, 'GET').then(res => {
					console.log(res);
					uni.showToast({
						title: '您已成功签退，欢迎下次预约！',
						success() {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1000)
						}
					})
					_this.searchAppointmentInfo();
				});


			},



			//扫码开门
			scanOpenDoor(flag = '') {
				let _this = this;
				this.$utils.requestFun('/security/DW200Api/api/getDw20OpenCodeByOrderId', {
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					orderId: _this.appointmentInfo.orderId
				}, 'GET').then(res => {
					if (res.data.data && res.data.data != '') {
						//跳转到另外一个页面去呈现开门二维码
						uni.navigateTo({
							url: '/pages/openDoor/openDoor?orderId=' + _this.appointmentInfo.orderId
						});
					}
				});
			},
			//查询会员预约信息
			searchAppointmentInfo() {
				let _this = this;
				this.$utils.requestFun('/stadium/laboratoryOrder/api/queryUserLaboratoryOrderList?route=curriculum', {
					token: getApp().globalData.token,
					orderStates: "0,10,20",
					page: 1,
					limit: 1
				}, 'GET').then(res => {
					if (res.data.data.data && res.data.data.data.length > 0) {
						_this.hasAppointmentInfo = true;
						_this.appointmentInfo = res.data.data.data[0];
					} else {
						_this.hasAppointmentInfo = false;
						_this.appointmentInfo = {};
					}

				})
			},

			//取消订单
			cancleOrder() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '是否确认取消订单？',
					success: function(res) {
						if (res.confirm) {

							let cancelUrl =
								'/stadium/laboratoryOrder/api/memberCancelLaboratoryOrder?route=curriculum';
							if (_this.appointmentInfo.isVisited == 1) {
								cancelUrl =
									"/stadium/laboratoryOrder/api/memberCancelVisitedOrder?route=curriculum";
							}

							_this.$utils.requestFun(cancelUrl, {
								token: getApp().globalData.token,
								appId: getApp().globalData.appid,
								orderId: _this.appointmentInfo.orderId
							}, 'GET').then(res => {
								console.log(res);
								uni.showToast({
									title: '取消成功！',
									success() {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											});
										}, 1000)
									}
								})
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			jumpMineInfo() {
				uni.navigateTo({
					url: '/pages/mineInfo/mineInfo',
				});
			},
			//查看更多预约
			goMoreAppointment() {
				uni.navigateTo({
					url: '/pages/moreAppointment/moreAppointment',
				});
			},
			//预约详情
			goAppointmentInfo() {
				let _this = this;
				uni.navigateTo({
					url: '/pages/appointmentInfo/appointmentInfo?orderId=' + _this.appointmentInfo.orderId,
				});
			},
			goArticleInfo(articleId, name) {
				let _this = this;
				uni.navigateTo({
					url: '/pages/articleInfo/articleInfo?articleId=' + articleId + '&name=' + name,
				});
			},
			jumpPage(flag) {
				if (flag == 1) {
					uni.navigateTo({
						url: '/pages/commonQuestion/commonQuestion',
					});
				} else if (flag == 2) {
					uni.navigateTo({
						url: '/pages/onlineWarranty/onlineWarranty',
					});
				} else if (flag == 3) {
					uni.navigateTo({
						url: '/pages/mineWarranty/mineWarranty',
					});
				} else if (flag == 4) {
					uni.navigateTo({
						url: '/pages/surveyQuestionnaire/surveyQuestionnaire',
					});
				}
			},
			changeSignOutMsg: function(evt) {
				console.log(evt.detail.value);
				this.signOutMsgIds = [];
				if (evt.detail.value) {
					this.signOutMsgIds = evt.detail.value;
				}
				console.log("signOutMsgIds=" + this.signOutMsgIds);
			},
		}
	}
</script>
<style scoped >
	/deep/.uni-popup .uni-popup__wrapper {
	    width: 90% !important;
	    padding: 40rpx;
	}
</style>
<style>
	.mineContainer {
		width: 100%;
		/* height: 100vh; */
		background: #F6F6F6;
		padding-bottom: 20rpx;
	}

	.txtOverFlow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.flex {
		display: flex;
	}
	.inputBox2 {
	
		border: 1px solid #efefef;
		border-radius: 10px;
		margin: 0 auto;
		padding: 10px 0 10px 10px;
		margin-bottom: 10px;
	}
	.inputBox {
		margin-left: 26rpx;
	}
	
	.moreIcon3 {
		width: 66rpx;
		height: 16rpx;
		position: absolute;
		right: 20px;
		top: 40%;
	}
	
	
	.selectSchoolBox {
		width: 85%;
		height: 30rpx;
		line-height: 30rpx;
		margin: 80rpx 45rpx 45rpx 45rpx;
		/* background: #F6F6F6;
		border-radius: 49rpx; */
	}

	.headerBox {
		width: 100%;
		height: 230rpx;
		padding-top: 47rpx;
		background-image: url("https://t.acoer.cn/guoshiBgImg/indexHeadBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.userHeadPic {
		width: 160rpx;
		height: 158rpx;
		border-radius: 50%;
		margin-left: 26rpx;
		margin-right: 28rpx;
	}

	.userInfoBox {
		width: 62%;
	}

	.userName {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 39rpx;
		margin-top: 32rpx;
	}

	.userState {
		min-width: 118rpx;
		height: 48rpx;
		display: inline-flex;
		margin-top: 21rpx;
		background: #61d2a5;
		border-radius: 24rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		padding-left: 22rpx;
	}

	.setIcon {
		width: 36rpx;
		height: 36rpx;
	}

	.mineInfoBox {
		width: 100%;
		/* height: 800rpx; */
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		margin-top: -24px;
		background: #F6F6F6;
	}

	.mineHeaderBox {
		clear: both;
		line-height: 30rpx;
		padding: 49rpx 20rpx 23rpx 20rpx;
	}

	.leftLine {
		width: 8rpx;
		height: 30rpx;
		background: #19AD78;
		border-radius: 4rpx;
	}

	.mineHeaderLeft {
		width: 81.5%;
	}

	.mineHeaderTit {
		font-size: 34rpx;
		font-weight: bold;
		color: #222222;
		margin-left: 10rpx;
		width: 70%;
	}

	.mineHeaderRight {
		font-size: 24rpx;
		color: #999999;
	}

	.moreIconHui {
		width: 21rpx;
		height: 21rpx;
		margin-left: 6rpx;
		margin-top: 6rpx;
	}

	.yuyueListBox {
		width: 88%;
		min-height: 168rpx;
		background-color: #FFFFFF;
		padding: 10rpx 20rpx;
		margin: 24rpx;
		margin-bottom: 0px;
		border-radius: 20rpx;
	}

	.yuyueHeaderBox {
		width: 100%;
		line-height: 79rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.classRoomIcon {
		width: 25rpx;
		height: 25rpx;
		margin-right: 15rpx;
		margin-top: 28rpx;
	}

	.yuyueTit {
		font-size: 28rpx;
		font-weight: bold;
		color: #222222;
		width: 40%;
	}

	.yuyueTime {
		font-size: 26rpx;
		color: #222222;
		width: 30%;
	}

	.yuyueTimeListBox {
		width: 100%;
		margin-top: 30rpx;
	}

	.yuyueTimeItem {
		width: 200rpx;
		height: 80rpx;
		background-color: #F6F6F6;
		font-size: 28rpx;
		color: #222222;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
		float: left;
		margin-right: 20rpx;
		margin-bottom: 18rpx;
	}

	.locationBox {
		width: 100%;
		font-size: 28rpx;
		color: #666666;
		margin-top: 30rpx;
	}

	.locationIcon {
		width: 27rpx;
		height: 27rpx;
		margin-right: 13rpx;
		margin-top: 8rpx;
	}

	.serviceBox {
		width: 94%;
		height: 190rpx;
		margin: 24rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.serviceItem {
		width: 18%;
		margin-top: 47rpx;
		margin-left: 39rpx;
		text-align: center;
		float: left;
	}

	.serviceContentBox {
		/* width: 94%; */
		/* height: 380rpx; */
		margin: 24rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 20rpx;
		/* justify-content: center; */
	}

	.serviceeContentItem {
		width: 18%;
		margin-top: 47rpx;
		margin-left: 39rpx;
		text-align: center;

		/* float: left; */
	}

	.serviceIcon {
		width: 50rpx;
		height: 50rpx;
		display: block;
		margin: 0 auto;
		margin-bottom: 19rpx;
	}

	.serviceTxt {
		font-size: 24rpx;
		color: #222222;
	}

	.mineInfoBottom {
		margin-top: 70rpx;
		/* position: absolute;
		bottom: -70px; */
		width: 100%;
	}

	.mineInfoBottom-item {
		font-size: 24rpx;
		color: #999999;
		line-height: 39rpx;
		text-align: center;
	}

	.appointmentInfoBtn {
		width: 25%;
		height: 65rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 30rpx;
		line-height: 65rpx;
		display: block;
		margin: 0 auto;
		font-size: 25rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.popBox {
		width: 84%;
		margin-left: 4%;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
	}
	
	.classroomPopBox {
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
	}

	.popTextArea {
		border: 1px solid #bbb;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		width: 95%;
	}

	.popBtn {
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 30rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.popTitle {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.radioLabel {
		line-height: 46rpx;
		margin-bottom: 20px;
		font-size: 30rpx;
		float: left;
		width: 90%;
	}

	.uni-radio-input.uni-radio-input-checked {
		font: normal normal normal 14px/1 uni;
		font-size: 14px;
		content: " " !important;
		color: #fff;
		font-size: 18px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -48%) scale(.73);
		-webkit-transform: translate(-50%, -48%) scale(.73);
	}
</style>
